<template>
  <div title="退出全屏" @mouseover.stop="onMouseover" @mouseout.stop="onMouseout">
    <div @click.stop="onCloseFullScreen" class="close-full-screen" :style="{ top: state.closeBoxTop + 'px' }">
      <el-icon>
        <CircleCloseFilled style="width: 1.5em; height: 1.5em; margin-right: 8px" />
      </el-icon>
    </div>
    <div class="close-full-screen-on"></div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, onBeforeUnmount } from "vue";
import { useNavTabs } from "@/store/navTabs";
var timer: NodeJS.Timer

const navTabs = useNavTabs();

const state = reactive({
  closeBoxTop: 20,
});
onMounted(() => {
  timer = setTimeout(() => {
    state.closeBoxTop = -30;
  }, 300);
});
onBeforeUnmount(() => {
  clearTimeout(timer)
})
const onMouseover = () => {
  state.closeBoxTop = 20;
};
const onMouseout = () => {
  state.closeBoxTop = -30;
};
const onCloseFullScreen = () => {
  navTabs.setFullScreen(false);
};
</script>
<style lang="scss" scoped>

</style>
